<template>
  <!-- 登录窗口 -->
  <el-dialog
    class="my-dialog"
    v-model="dialogVisible"
    width="800px"
    top="230px"
    :show-close="false"
    :close-on-click-modal="false"
  >
    <template #header="{ titleId }">
      <div class="my-header">
        <h4
          :id="titleId"
          class="-mt-2 text-xl text-left text-black login-title"
        >
          详情
        </h4>
        <el-icon class="my-close-btn" @click="() => (dialogVisible = false)">
          <Close />
        </el-icon>
      </div>
    </template>
    <div class="detail text-base">
      <div class="flex items-center">
        <img class="block" src="/feeder/88.png" alt="img" width="200" />
        <div>
          <div class="flex">
            <p class="flex mb-4">
              <label class="block w-24 text-right mr-4 font-bold">Name</label
              ><span class="w-40 text-gray-500">{{ info.Name }}</span>
            </p>
            <p class="flex mb-4">
              <label class="block w-24 text-right mr-4 font-bold">Number</label
              ><span class="w-40 text-gray-500">{{ info.Number }}</span>
            </p>
          </div>
          <div class="flex">
            <p class="flex mb-4">
              <label class="block w-24 text-right mr-4 font-bold">Brand</label
              ><span class="w-40 text-gray-500">{{ info.Brand }}</span>
            </p>
            <p class="flex mb-4">
              <label class="block w-24 text-right mr-4 font-bold">Station</label
              ><span class="w-40 text-gray-500">{{ info.Station }}</span>
            </p>
            
          </div>
          <div class="flex">
            <p class="flex mb-4">
              <label class="block w-24 text-right mr-4 font-bold">Port</label
              ><span class="w-40 text-gray-500">{{ info.Port }}</span>
            </p>
            <p class="flex mb-4">
              <label class="block w-24 text-right mr-4 font-bold">IP</label
              ><span class="w-40 text-gray-500">{{ info.IP }}</span>
            </p>
            
          </div>
          <div class="flex">
            <p class="flex mb-4">
              <label class="block w-24 text-right mr-4 font-bold">OPID</label
              ><span class="w-40 text-gray-500">{{ info.OPID }}</span>
            </p>
            <p class="flex mb-4">
              <label class="block w-24 text-right mr-4 font-bold">Activity</label
              ><span class="w-40 text-gray-500">{{ info.Activity ? '启用' : '未启用' }}</span>
            </p>
          </div>
        </div>
      </div>
    </div>
    <p class="mt-10 text-right">
      <el-button type="primary" @click="dialogVisible = false">
        关 闭
      </el-button>
    </p>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref } from "vue";

interface Feeder {
  Name: string;
  Number: string;
  Brand: string;
  IP: string;
  Port: string;
  Station: string;
  OPID: string;
  Activity: boolean
}
const dialogVisible = ref(false);
let info = ref<Feeder>({
  Name: "",
  Number: "",
  Brand: "",
  IP: "",
  Port: "",
  Station: "",
  OPID: "",
  Activity: false
});
const open = (data: Feeder) => {
  info.value = data;
  dialogVisible.value = true;
};
defineExpose({ open });
</script>
<style scoped lang="less">
.my-close-btn {
  position: absolute;
  right: 10px;
  top: 10px;
  cursor: pointer;
  color: #666;
}
</style>
